<template>
  <view class="container">
	  <view class="title-h1">东软环保公众监督平台</view>
	  <!-- <view class="title-h2">——公众监督员端</view> -->
    <!-- 登录表单 -->
    <view v-if="showLogin" class="form-card">
      <view class="cu-form-group margin-top">
        <input v-model="login.phoneNumber" class="cu-input round" placeholder="手机号" />
      </view>
      <view class="cu-form-group">
        <input v-model="login.passWord" class="cu-input round" type="password" placeholder="密码" />
      </view>
      <button class="cu-btn block bg-blue margin-top round shadow-blur" @click="handleLogin">登录</button>
      <view class="text-center link-text" @click="toggleForm">注册账户</view>
    </view>
    
    <!-- 注册表单 -->
    <view v-else class="form-card">
      <view class="cu-form-group margin-top">
        <input v-model="register.phoneNumber" class="cu-input round" placeholder="手机号" />
      </view>
      <view class="cu-form-group">
        <input v-model="register.name" class="cu-input round"  placeholder="姓名" />
      </view>
	  <view class="cu-form-group">
	    <input v-model="register.age" class="cu-input round" placeholder="年龄" type="number" min="1" max="120"/>
	  </view>
	  <view class="cu-form-group">
	          <view class="title">性别</view>  <!-- 添加性别标签 -->
	          <radio-group @change="radioChange">
	            <label class="radio-label">
	              <radio value="1" color="#007aff" /> 男
	            </label>
	            <label class="radio-label">
	              <radio value="0" color="#007aff" /> 女
	            </label>
	          </radio-group>
	  </view>
	  <view class="cu-form-group">
	    <input v-model="register.passWord" class="cu-input round" type="password" placeholder="密码" />
	  </view>
      <view class="cu-form-group">
        <input v-model="register.confirmPassword" class="cu-input round" type="password" placeholder="确认密码" />
      </view>
      <button class="cu-btn block bg-blue margin-top round shadow-blur" @click="handleRegister">注册</button>
      <view class="text-center link-text" @click="toggleForm">返回登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLogin: true,
      login: {
        phoneNumber: '',
        passWord: ''
      },
      register: {
        phoneNumber: '',
		age:'',
		name:'',
		sex:'',
        passWord: '',
        confirmPassword: ''
      }
    }
  },
  watch: {
      'register.age'(newVal) {
        if (newVal < 1 || newVal > 120) {
          this.register.age = Math.max(1, Math.min(120, newVal));
          uni.showToast({
            title: '年龄键入不符合规范',
            icon: 'none'
          });
        }
      }
    },
  methods: {
    handleLogin() {
		const params = {
			phoneNumber: this.login.phoneNumber,
			passWord: this.login.passWord
		};
		if (params.phoneNumber == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
				duration: 2000
			});
		} else if (params.passWord == '') {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
				duration: 2000
			});
		} else {
			uni.request({
				url: 'http://localhost:8086/login',
				method: 'POST',
				header: {
					'Content-Type': 'application/json' 
				},
				data: params,
				success: (res) => {
					if (res.data.code === 200) {
						console.log('登录成功');
						const Uid = this.login.phoneNumber;
						uni.setStorageSync('id', Uid);
						uni.navigateTo({
							url:'/pages/grid/grid'
						})
					} else if (res.data.code === 400 && res.data.message==='密码错误') {
						uni.showToast({
							title: '密码错误',
							icon: 'none',
							duration: 2000
						});
					} else  {
						uni.showToast({
							title: '用户不存在',
							icon: 'none',
							duration: 2000
						});
					}
				},
			});
		}
      
    },
    handleRegister() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.register.phoneNumber)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return;
      }

      if (this.register.passWord !== this.register.confirmPassword) {
        uni.showToast({
          title: '密码不一致',
          icon: 'none'
        });
        return;
      }
	  uni.request({
	  	url:'http://localhost:8086/register',
		method:'POST',
		header:{'Content-Type': 'application/json'},
		data:this.register,
		success:(res)=>{
			if(res.data.code===200){
				uni.showToast({
					title: '注册成功',
					icon: 'none',
					duration: 2000
				});
			}else if(res.data.code===400 && res.data.message==='手机号已被使用'){
				uni.showToast({
					title: '手机号已被占用',
					icon: 'none',
					duration: 2000
				});
			}else{
				uni.showToast({
					title: '因未知原因注册失败',
					icon: 'none',
					duration: 2000
				});
			}
		}
	  })
      console.log('注册信息:', this.register.phoneNumber, this.register.passWord, this.register.name, this.register.gender);
    },
    toggleForm() {
      this.showLogin = !this.showLogin;
    },
	radioChange:function(e){
		this.register.sex=e.detail.value
	}
  }
}
</script>

<style>
	
.title-h1 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 10px;  /* 下边距，使得标题与内容有一定间距 */
}

.title-h2 {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 20px;  /* 下边距，使得小标题与内容有一定间距 */
}

.container {
  padding: 20px;
  /* background-color: #55ff00; */
  background-image: url(/static/jdzy.jpg);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-card {
  width: 90%;
  max-width: 400px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cu-form-group {
  margin-bottom: 20px;
}

.margin-top {
  margin-top: 20px;
}

.round {
  border-radius: 20px;
}

.shadow-blur {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.text-center {
  text-align: center;
  margin-top: 15px;
}

.link-text {
  color: #1cbbb4;
  font-size: 14px;
}
</style>
